<template>
    <view>
        <ls-page page-class="z-overspread-page" id="page" title="打赏" :backFn="backFn" :default-bg="false">
            <view class="reward-contain">
                <view class="reward-contain-header">
                    <image class="header-left" src="https://oss.jtmckj.com/wmp/kbq/reward/i_xianchang.png" />
                    <view class="header-right">
                        <scroll-view class="scroll-view" :scroll-x="true">
                            <view :class="['header-right-item', k == timeActive ? 'active' : '']"  v-for="(v, k) in formBatchList" :key="k" @click="changeTime(k,v.batchCode,v.type)" >               
								<view class="item-top">{{v.state}}</view>
								<view class="item-bottom">{{v.startTime}}-{{v.endTime}}</view>
								
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <view class="reward-contain-nav">
                    <view class="nav-left">
                        <view :class="['nav-left-item', k == sexActive ? 'spe' : '']" v-for="(v,k) in sexList" :key="k" @click="changeSex(k,v.Code)">{{v.Name}}</view>
                    </view>
                    <view class="nav-right">
                        <scroll-view class="scroll-view" :scroll-x="true">
                            <view :class="['nav-right-item', k == singerType ? 'spe' : '']" v-for="(v,k) in professional" :key="k" @click="changeSingerType(k,v.Code)">{{v.Name}}</view>
                          
                        </scroll-view>
                    </view>
                </view>
                <view class="reward-contain-banner" v-if="singerList.length > 0">
                    <scroll-view class="scroll-view" :scroll-x="true">
                        <view :class="['banner-item']" v-for="(v,k) in singerList" @click="changeSinger(k,v)" :key="k">
							<view class="" v-if="v.type == 2">
								<image class="banner-item-img" :src="v.attachment" />
								<!-- <view :class="['banner-item-title', k == singerActive ? 'spe' : '']">{{v.stageName}}</view> -->
								<!-- <image class="banner-item-active" v-show="k == singerActive" src="https://oss.jtmckj.com/wmp/ch/reward/i_icon_select.png" /> -->
							</view>
							<view class="" v-else>
								<image class="banner-item-img" v-if="v.attachment"  :src="v.attachment" />
								<image class="banner-item-img" v-else src="https://oss.jtmckj.com/supplyH5/notattachment.png" />
								<view :class="['banner-item-title', k == singerActive ? 'spe' : '']">{{v.stageName}}</view>
								<image class="banner-item-active" v-show="k == singerActive" src="https://oss.jtmckj.com/wmp/ch/reward/i_icon_select.png" />
							</view>
                         
                        </view>
                    </scroll-view>
                </view>
				<image class="jt-zwcj-img"  v-if="singerList.length < 1" src="https://oss.jtmckj.com/supplyH5/jt-zwcj-img.png" mode=""></image>
                <view class="reward-contain-order" v-show="tabShow == 0">
			

                    <view class="order-top">
                        <view class="order-top-title">歌曲表</view>
                         <view class="jt-flex-action">
                         	  <view class="ds-detai" @click="Rewardetail = true">
                         	  	   打赏记录
                         	  </view>
                         	  <view class="order-change spe" @click="showRecord = true">
                         	  	点歌记录
                         	  </view>
							  <view class="border-bd"></view>
                         </view>
                    </view>
					<view class="order-top-value">
					    可点{{songsAll}}首，剩余可点
					    <text class="song-num">{{songsCanOrder}}</text>
					    首
					</view>
                    <view class="order-main" v-if="songsList.length > 0 ">
                        <view class="order-main-li" v-for="(v, k) in songsList" :key="k">
                            <view class="li-left">{{v.songName}}</view>

                            <view class="li-right">原唱：{{v.origSinger}}</view>
                        </view>
                    </view>
					<view class="tips-none" v-if="songsList.length <= 0">
						<image class="tips-none-img" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/tgx/common/i_none.png" mode="" />
						<view class="tips-none-title">
							暂无内容
						</view>
					</view>
					
					
                </view>
				<view class="reward-contain-order" v-show="tabShow == 1">
				<!-- 	<view class="order-change" @click="tabShow = 0">
						歌曲表
					</view> -->
				    <view class="order-top">
				        <view class="order-top-title">点歌记录</view>
				    </view>
					<view class="order-main-nav">
					    <view class="songList-li-left one">歌曲名</view>
						<view class="songList-li-left two">歌手</view>
						<view class="songList-li-left three">金额</view>
					    <view class="songList-li-left four">点歌人</view>
						<view class="songList-li-left five">时间</view>
					</view>
					<view class="order-main">
						<view class="order-main-orderList" v-for="(v, k) in orderSongList" :key="k">
						   <view class="li-right one">{{v.songName}}</view>
						    <view class="li-right two">{{v.artistName}}</view>
							<view class="li-right three">{{v.payPrice}}</view>
							<view class="li-right four">{{ v.memberName }}</view>
							<view class="li-right five">{{ dayjs(v.crDate).format('HH:mm:ss') }}</view>
						</view>
					</view>
				   
				</view>
				<view class="jtreward-contain-box" v-if="!popupShow">
					   <view class="reward-contain-tab" :class="{'as-center':['0030'].includes(storeShopInfo.orgCode)}">
					       <view  class="tab-left"  :class="{'as-display-none':['0030'].includes(storeShopInfo.orgCode)}" v-if="!popupShow" data-id="0" @click="showpup"></view>
					       <view  class="tab-right" v-if="!popupShow" data-id="1" @click="showpup"></view>
					   </view>
				</view>
 
			
            </view>
           <x-popup :show="popupShow" position="bottom" @close="changePopup" :closeable="true">
                <view class="popup-container">
					<view class="popup-container-title">{{popupTitle}}</view>
                   <!-- <view class="popup-container-tab">
                        <view  :class="['tab-left', popupTab == 0 ? 'active' : '']" data-id="0" @click="popChange"></view>
                        <view  :class="['tab-right', popupTab == 1 ? 'active' : '']" data-id="1" @click="popChange"></view>
                    </view> -->
                    <view class="popup-container-order" v-if="popupTab != 1">
                        <view class="popup-container-search">
                            <up-search placeholder="搜索歌曲名、歌手" @change="onsingerChange"  :showAction="false"/>
                        </view>
                        <view class="popup-container-secTab">
                            <!-- <up-tabs :list="tabList" :active="songTabActive" @change="bdChange" /> -->
                        </view>
                        <view class="popup-container-main">
                            <view class="main-item" v-for="(v, k) in songsList" :key="k">
                                <view class="item-top">
                                    <view class="item-top-left">
                                        <view class="top-left-title">{{v.songName}}</view>
                                        <view class="top-left-value">（演唱：<text class="value-name">{{v.artistName}}</text>）</view>
                                    </view>
                                    <view class="item-top-right" @click="doPerformChoose(v)">点歌</view>
                                </view>

                                <view class="item-bottom">
                                    <view class="item-bottom-left">
                                        <view class="left-first">原唱：<text class="left-first-name">{{v.origSinger}}</text></view>
                                        <view class="left-second">被点次数：<text class="left-first-name">{{v.totalCount}}次</text></view>
                                    </view>
                                    <view class="item-bottom-right">可点：<text class="order-num">{{v.maxCount - v.currentCount}}</text>/{{v.maxCount}}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="popup-container-gift" v-if="popupTab != 0">
                        <view class="gift-top">
                            <view class="gift-top-item" v-for="(v, k) in giftList" :key="k" @click="changeSelGift(v,k)">
                                <image :class="['item-img', giftValue == k ? 'active' : '']" :src="v.attachment" />

                                <view class="item-title">{{v.name}}</view>

                                <view class="item-value">￥{{v.price}}</view>
                            </view>
							
                        </view>
                        <view class="gift-center">
                            <view class="gift-center-title">寄语( To艺人：{{rewardForm.artistName}} )</view>
                            <view class="gift-center-main">
                                <up-input class="main-value" placeholder="请输入寄语" v-model="rewardForm.remark"/>

                                <view class="main-button" @click="onTable">{{rewardForm.roomName?rewardForm.roomName:'选择桌号'}}</view>
                            </view>
                        </view>
                        <view class="gift-bottom" v-if="popupTab != 0">
                            <view class="gift-bottom-left">￥{{rewardForm.giftNum * rewardForm.giftPrice}}</view>
                            <view class="gift-bottom-right">
								 <uni-data-select class="right-num" v-model="rewardForm.giftNum" :localdata="giftNumRange" @change="giftNumChange" placement="top"></uni-data-select>
								
                                <view class="right-title" @click="submitGit">提交打赏</view>
                            </view>
                        </view>
                    </view>
                </view>
            </x-popup>
            <x-popup :show="showTable" position="bottom" @close="showTable = false" @update:show="showTable = $event">
            	<view class="table-container">
            		<view class="popup-container-header">
            			<view class="header-left" @click="showTable = false">取消</view>
            			<view class="header-center">选择桌号</view>
            			<view class="header-right" @click="tableConfirm">确认</view>
            		</view>
            		<!-- 选择区域 -->
            		<view class="popup-container-main">
            			<!-- <van-row style="width:100%" gutter="9" bind:tap="selectArea"> -->
            			<van-col span="6" class="main-item" v-for="(item, index) in list" :key="index">
            				<view class="main-item-one"
            					  :class="{
            					          'selected': currentArea === index, 
            					          'unselected': currentArea !== index
            					        }"
            					@click="selectArea(index)">
            					{{ item.areaName }}
            				</view>
            			</van-col>
            			<!-- </van-row> -->
            		</view>
            		<!-- 选择桌号 -->
            		<view class="popup-container-footer" v-if="currentArea !== null">
            			<view class="footer-item" @click="selectTab(index)"
            				v-for="(table, index) in list[currentArea].children" :key="index"
            				 :class="{
            				      'selected': currentTable === index, 
            				      'unselected': currentTable !== index
            				    }">
            				{{ table.name }}
            			</view>
            		</view>
            	</view>
            </x-popup>
			<x-popup :show="showRecord" position="bottom" @close="showRecord = false" :closeable="true" @update:show="showRecord = $event">
				<view class="popup-container">
					<view class="popup-container-title">点歌记录</view>
				    <view class="popup-container-order">
				        <view class="popup-container-main">
				            <view class="main-item" v-for="(v, k) in orderSongList" :key="k">
				                <view class="item-top">
				                    <view class="item-top-left">
				                        <view class="top-left-title">{{v.songName}}</view>
				                        <view class="top-left-value">（演唱：<text class="value-name">{{v.artistName}}</text>）</view>
				                    </view>
									<view class="top-price">￥{{_FormatNumber(v.payPrice)}}</view>
				                    <!-- <view class="item-top-right" @click="doPerformChoose(v)">点歌</view> -->
				                </view>
				
				                <view class="item-bottom">
				                    <view class="item-bottom-left">
				                        <view class="left-first">点歌人：<text class="left-first-name">{{v.memberName}}</text></view>
				                    </view>
				                    <view class="item-bottom-right">{{ dayjs(v.crDate).format('HH:mm:ss') }}</view>
				                </view>
				            </view>
				        </view>
				    </view>
				
				</view>
			</x-popup>
			<x-popup :show="Rewardetail" position="bottom" @close="Rewardetail = false" :closeable="true" @update:show="Rewardetail = $event">
				<view class="popup-container">
					<view class="popup-container-title">打赏记录</view>
				     <!-- 打赏礼物记录 ？？ -->
					 <view class="reward-contain-continar">
					 	       <view class="reward-contain-tips">
					 	             <view class="tips-item" v-for="(v, k) in rewardList" :key="k">
					 	                 <view class="tips-item-top">
					 	                     <view class="top-left">
					 	                         <image class="top-left-img" :src="v.memberHeadImage ? v.memberHeadImage : 'https://oss.jtmckj.com/wmp/ch/reward/i_icon_avt.png'" />
					 	                         <view class="top-left-user">
					 	                             <view class="user-title">{{v.memberName}}</view>
					 	                             <view class="user-value">{{v.roomName}}</view>
					 	                         </view>
					 	                     </view>
					 	                     <view class="top-right">
					 	                         <image class="top-right-img" :src="v.giftImage" />
					 	                     </view>
					 	                 </view>
					 	      
					 	                 <view class="tips-item-bottom">
					 	                     <view class="bottom-tips">
					 	                         <view class="tips-left">
					 	                             {{v.roomName ? v.roomName : '游客'}}<text v-if="v.roomName">桌</text>给
					 	                             <text class="tips-name">{{v.artistName}}</text>
					 	                             送出了<text class="tips-gift">{{v.giftName}}</text>   
					 	                         </view>
					 	                         <view class="tips-right">
					 	                             <image class="tips-right-num" src="https://oss.jtmckj.com/wmp/ch/reward/i_icon_num.png" />
					 	                             <view class="tips-right-val">{{v.giftNum}}</view>
					 	                         </view>
					 	                     </view>
					 	                     <view class="bottom-pay" data-id="1" @click="rewardLiji(v)">立即打赏</view>
					 	                 </view>
					 	             </view>
					 	      					<view class="tips-none" v-if="rewardList.length <= 0">
					 	      						<image class="tips-none-img" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/tgx/common/i_none.png" mode="" />
					 	      						<view class="tips-none-title">
					 	      							暂无内容
					 	      						</view>
					 	      					</view>
					 	         </view>
					 </view>
				</view>
			</x-popup>
        </ls-page>
		<x-popup :show="showDialog" position="center" @close="cancleDialog" :closeable="true">
			<view class="pop-contain">
				<view class="pop-title">
					提示
				</view>
				<view class="pop-center">
					确定要点这首歌吗？
				</view>
				<view class="pop-footer">
					<view class="btn-cancle" @click="cancleDialog">
						取消
					</view>
					<view class="btn-confirm" @click="confirmDialog">
						确定
					</view>
				</view>
			</view>
			
		</x-popup>
		<pay v-if="songPayShow" :show="songPayShow" @update:show="songPayShow = $event" @finishPay="finishPaySong($event)" payto="orderSong" :info="paySongInfo" :secondInfo="doPaySongInfo" />
		<pay v-if="giftPayShow" :show="giftPayShow" @update:show="giftPayShow = $event" @finishPay="finishGift($event)" payto="gift" :info="payGiftInfo" :secondInfo="doPayGiftInfo" />
    </view>
</template>


<script setup>
// var jweixin = require('jweixin-module'); 
import { ref, reactive, onMounted,onUnmounted } from 'vue';
import { debounce,_FormatNumber } from '@/until/tools.js';
import { HFiveMemberAppObjProcess } from '@/api/public.js'
import dayjs from 'dayjs';
// import { wxpay } from "@/until/pay";

import wx from "weixin-js-sdk";
// import wechath5 from '@/until/wechath5'

console.log(wx);
const tabShow = ref(0) // 歌曲表 点歌记录切换
const storeShopInfo = ref(uni.getStorageSync('shopInfo'))
// --------------------------------------------------------------- 筛选 ------------------------------------------------------------
const timeActive = ref(0)
const sexActive = ref(0)
const singerType = ref(0)
const singerActive = ref(0)
const changetype = ref(null)
const changeTime = (k,code,type)=>{ // 场次筛选
	timeActive.value = k
	artistForm.value.batchCode = code
	console.log(type,'v.type')
	changetype.value = type
	if(changetype.value != 1) {
		  doGetPerformArtist() // 获取歌手
	 } else {
		 	singerList.value = [
		 			 {   
		 				 type:2,
		 				 attachment:'https://oss.jtmckj.com/supplyH5/zwge-icon.png'
		 			 },
		 			 {
						 type:2,
						 attachment:'https://oss.jtmckj.com/supplyH5/zwge-icon.png'
		 			 },
		 			 {
						 type:2,
						 attachment:'https://oss.jtmckj.com/supplyH5/zwge-icon.png'
		 			 },
		 			 {
					 type:2,
					 attachment:'https://oss.jtmckj.com/supplyH5/zwge-icon.png'
		 			 }
		 		]
				songsList.value = []
				songsCanOrder.value = 0
				songsAll.value = 0
	 }
}
const changeSex = (k,code)=>{ // 性别筛选
console.log(code);
	sexActive.value = k
	artistForm.value.sexCode = code
	if(changetype.value != 1) {
	  doGetPerformArtist() // 获取歌手
	}
}
const changeSingerType = (k,code)=>{ // 类别筛选
	singerType.value = k
	artistForm.value.professionalCode = code
	if(changetype.value != 1) {
	  doGetPerformArtist() // 获取歌手
	}
	
}
const changeSinger = (k,v)=>{
	console.log(formBatchList.value);
	singerActive.value = k
	songsForm.value.batchCode = formBatchList.value[timeActive.value].batchCode,
	songsForm.value.artistCode = v.artistCode,
	songsForm.value.artistName = v.artistName,
	songsForm.value.origSinger = '',
	songsForm.value.songName = '',
	songsForm.value.name = ''
	doGetPerformArtistSong() // 获取歌手的歌曲
}

const showRecord = ref(false)

// ------------------------------------------------------  点歌打赏弹窗 	------------------------------------------------------------
const tabList = reactive([
  { name: '飙升榜', value: '0' },
  { name: '新歌榜', value: '1' }
]);
const popupTab = ref(0); // 0 点歌  1打赏
const songTabActive = ref('1'); // 0飙升榜 // 1新歌榜
const popupShow = ref(false);
const popupTitle = ref('选择礼物');
const rewardFromType = ref('')
const changePopup = () => { // 关闭弹窗
  popupShow.value = !popupShow.value;
  changeSinger(0,singerList.value[0])
};
const showpup = (e) => { // 打开弹窗
doGetPerformGift()
  const id = e.currentTarget.dataset.id;
  console.log(id);
  let title = id == 0 ? '歌曲表' : '选择礼物';
  popupShow.value = true;
  popupTab.value = id; 
  songTabActive.value = id;
  popupTitle.value = title; // 弹窗标题
  if(id == 0){ // 打开弹窗时如果 点歌
	  songsForm.value = {
	  	batchCode:formBatchList.value[timeActive.value].batchCode,
	  	artistCode:'',
	  	artistName:'',
	  	origSinger:'',
	  	songName:'',
		name:singerList.value[singerActive.value].artistName,
	  }
	  doGetPerformArtistSong('pop')
  }else{ // 打赏
	 rewardForm.value.artistCode = singerList.value[singerActive.value].artistCode
	 rewardForm.value.artistName = singerList.value[singerActive.value].artistName
  }
  
};
const rewardLiji = (v)=>{ // 立即打赏
	popupTitle.value = '选择礼物'; // 弹窗标题
	Rewardetail.value = false
	popupShow.value = true;
	popupTab.value = 1; 
	rewardForm.value.artistCode = v.artistCode
	rewardForm.value.artistName = v.artistName
}

const popChange = (e) => { // 点歌  打赏 切换
  const id = e.currentTarget.dataset.id;
  let title = id == 0 ? '歌曲表' : '选择礼物';
  popupTab.value = id;
  popupTitle.value = title;
};
const bdChange = (e) => {  // 榜单切换
	
  const id = e.value;
  songTabActive.value = id;
};

const onsingerChange = debounce(function(e) { 
    console.log(e);
	songsForm.value = {
		batchCode:formBatchList.value[timeActive.value].batchCode,
		artistCode:'',
		artistName:'',
		origSinger:'',
		songName:'',
		name:e
	}
	doGetPerformArtistSong('pop')
}, 800)

// ------------------------------------------------------- 获取房台 ----------------------------------------------------------

const showTable = ref(false);
const list = ref([]);
const currentTable = ref(0);
const currentArea = ref(0);
// 获取房台数据
const getRoomTable = async () => {
	const res = await HFiveMemberAppObjProcess({"functionName": "GetRoomOpWine_H5","contentData": {consumeState:''}})
	console.log(res);
    list.value = res
};

const onTable = () => {
  showTable.value = !showTable.value;
};

const selectArea = (e) => { // 选中区域
    currentArea.value = e;
    currentTable.value = 0;
};

const selectTab = (e) => {
    currentTable.value = e
};

// 确认选中桌台
const tableConfirm = () => {
  const table = list.value[currentArea.value]?.children[currentTable.value];
  if (!table) {
	  uni.showToast({
	  	title: '请选择桌台',
	  	icon: 'none'
	  }); 
    // alert('请选择桌台');
    return;
  }
  console.log(table);
  rewardForm.value.roomName = table.name
  rewardForm.value.roomCode = table.code
  showTable.value = false;
};



// ------------------------------------------------------- 打赏 ------------------------------------------------------
const giftNumRange = Array.from({ length: 100 }, (_, i) => ({ // 数量选择数组
  value: i + 1,  // i 从 0 开始，所以加 1 以从 1 开始
  text: (i + 1),  // 将数字转换为字符串
}));

const giftValue = ref(0) // 默认选中的打赏礼物
const changeSelGift = (v,k)=>{ // 更换选中的礼物
	giftValue.value = k
	console.log(v);
	rewardForm.value.giftPrice = v.price
	rewardForm.value.giftCode  = v.code
	rewardForm.value.giftName  = v.name
	
}
const giftNumChange = (e) =>{ // 打赏数量变化
	console.log("e:", e);
	rewardForm.value.giftNum = e
}
    
const rewardForm = ref({
	batchCode:'',
	memberCode:'',
	memberCardCode:'',
	memberName:'',
	memberMobile:'',
	memberHeadImage:'',
	roomCode:'',
	roomName:'',
	artistCode:'',
	artistName:'',
	giftCode:'',
	giftNum:1,
	giftPrice:0,
	remark:'',
	payType:'002'
})
// const doPerformReward = async()=>{  // 打赏接口  现在默认在临时打赏里调用
	

// 	const res = await HFiveMemberAppObjProcess({"functionName": "performReward_H5","contentData": rewardForm.value})
// 	rewardList.value = res
// 	console.log(res);
// 	// singerList.value = res
// }
const giftPayShow = ref(false)
const payGiftInfo = ref({})
const doPayGiftInfo = ref({})
const submitGitFlag = ref(false)
const submitGit = async()=>{
	console.log(rewardForm.value);
	let fee = Number(rewardForm.value.giftPrice * rewardForm.value.giftNum)
	if(fee <= 0){
		uni.showToast({
			title: '请选择打赏礼物',
			icon: 'none'
		}); 
		return
	}
	if(!rewardForm.value.roomCode){
		uni.showToast({
			title: '请选择桌号',
			icon: 'none'
		}); 
		return
	}
	if(submitGitFlag.value){
		uni.showToast({
			title: '加载中，请稍等',
			icon: 'none'
		}); 
		return
	}
	submitGitFlag.value = true
	
	
	rewardForm.value.batchCode = formBatchList.value[timeActive.value].batchCode
	
	const cardfo = uni.getStorageSync('cardInfo')
	const payForm = {
	      orderBatchCode: '',
	      roomCode: rewardForm.value.roomCode,
	      consumeCode: '',
	      fee:fee,
		  memberCardCode:cardfo.code,
	};
	payGiftInfo.value = payForm // 唤起打赏支付参数
	rewardForm.value.payType = '002'
	doPayGiftInfo.value = rewardForm.value // 临时打赏参数
	giftPayShow.value = true
	// const orderRes  = await HFiveMemberAppObjProcess({"functionName": "PayPerform_H5","contentData": payForm})
	// const wxparams = {
	//   timeStamp: orderRes.timeStamp,
	//   nonceStr: orderRes.nonceStr,
	//   package: orderRes.package,
	//   signType: orderRes.signType,
	//   paySign: orderRes.paySign,
	//   tradeNo: orderRes.tradeNo
	// };
	// rewardForm.value.payType = '002'
	// const rewardInfo = rewardForm.value
	// wx.miniProgram.navigateTo({url: `/pages/home/h5pay/index?wxparams=${encodeURIComponent(JSON.stringify(wxparams))}&rewardInfo=${encodeURIComponent(JSON.stringify(rewardInfo))}`})
	// submitGitFlag.value = false
	// popupShow.value = false
}
// 打赏支付完成
const finishGift = ()=>{
	submitGitFlag.value = false
	giftPayShow.value = false
	uni.showToast({ title: '支付成功', icon: 'none' });
}


// ------------------------------------------------------  获取门店场次安排 	------------------------------------------------------------
const formBatchList = ref([])
const doGetPerformBatch = async()=>{
	uni.setStorageSync('orgCode','0018') 
	uni.setStorageSync('brandCode','0005') 
	
	const res = await HFiveMemberAppObjProcess({"functionName": "getPerformBatch_H5","contentData": ""})
		console.log(res);
		formBatchList.value = res
		if(formBatchList.value){
			// 获取当前时间
			const now = new Date();
			const currentTime = now.getHours() * 60 + now.getMinutes();  // 当前时间的分钟数
			formBatchList.value.map(item=>{
				const startTime = item.startTime  ;
				const endTime = item.endTime;
				const startMinutes = parseInt(startTime.split(":")[0]) * 60 + parseInt(startTime.split(":")[1]);
				const endMinutes = parseInt(endTime.split(":")[0]) * 60 + parseInt(endTime.split(":")[1]);
				item.state = (currentTime >= startMinutes && currentTime <= endMinutes) ? "进行中" : "未开始";
			})
			
		}
		
		if(formBatchList.value.length == 1) {
			  formBatchList.value.push(
			  {    
				   type:1,
				   state:'暂无歌手'
			  },
			  {    
				   type:1,
			  	   state:'暂无歌手'
			  }
			  )
		} else if(formBatchList.value.length == 2) {
			formBatchList.value.push(
			{    
			   type:1,
			   state:'暂无歌手'
			}
			)
		}
		console.log(formBatchList.value,'formBatchList.value')
}
const sexList = ref([]) // 歌手性别数组
const professional = ref([]) // 歌手类型
// -------------------------------------------------------  获取艺人的类型和性别  --------------------------------------------------------
const doGetPerformArtistAttribute = async()=>{
	const res = await HFiveMemberAppObjProcess({"functionName": "getPerformArtistAttribute_H5","contentData": ""})
	sexList.value= res.SexList
	professional.value = res.Professional
	sexList.value.unshift({Code:'',Name:'全部'})
	professional.value.unshift({Code:'',Name:'全部'})
	console.log(res);
}

// ------------------------------------------------------------ 获取门店场次的艺人 --------------------------------------------------------
const artistForm = ref({
	batchCode:'',
	sexCode:'',
	professionalCode:''
})
const singerList = ref([])
const doGetPerformArtist = async()=>{
	const res = await HFiveMemberAppObjProcess({"functionName": "getPerformArtist_H5","contentData": artistForm.value})
	console.log(res);
	console.log(res,'daad')
	if(res && res[0]){
		singerList.value = res

		// https://oss.jtmckj.com/supplyH5/zwge-icon.png
		songsForm.value.batchCode = artistForm.value.batchCode,
		songsForm.value.artistCode = res[0].artistCode,
		songsForm.value.artistName = res[0].artistName,
		doGetPerformArtistSong()
	}else{
		singerList.value = []
		songsList.value = []
		songsAll.value = 0
		songsCanOrder.value = 0
	}
	
	
	/* 暂无歌手 */
	function generateSingerList(count) {
	    const attachment = 'https://oss.jtmckj.com/supplyH5/zwge-icon.png';
	    const type = 2;
	    const items = [];
	    for (let i = 0; i < count; i++) {
	        items.push({ type, attachment });
	    }
	    return items;
	}
	
	if (res.length === 0) {
	    singerList.value = generateSingerList(4);
	} else {
	    const itemsToAdd = res.length === 1 ? generateSingerList(3) : res.length === 2 ? generateSingerList(2) : res.length === 3 ? generateSingerList(1) : [];
	    singerList.value.push(...itemsToAdd);
	}
	
} 

// ---------------------------------------------------------- 获取门店场次的艺人演唱的歌曲 ------------------------------------------------------
const songsList = ref([])
const songsForm = ref({
	batchCode:'',
	artistCode:'',
	artistName:'',
	origSinger:'',
	songName:'',
})
const songsAll = ref(0)
const songsCanOrder = ref(0)

const doGetPerformArtistSong = async(pop)=>{
	let obj = {
		batchCode:'',
		artistCode:'',
		artistName:'',
		origSinger:'',
		songName:'',
		name:'',
	}
	if(pop){ // 如果是弹窗打开的只要关联场次和查询名字
		obj.batchCode = songsForm.value.batchCode
		obj.name = songsForm.value.name
	}else{
		obj = songsForm.value
	}
	const res = await HFiveMemberAppObjProcess({"functionName": "getPerformArtistSong_H5","contentData": obj})
	songsList.value = res
	let allNum = 0
	let num = 0
	songsList.value.map(v=>{
		allNum += v.maxCount
		num += v.currentCount
	})
	songsAll.value = allNum
	songsCanOrder.value = allNum - num
	console.log(res);
	// singerList.value = res
}

// ------------------------------------------------------- 获取门店打赏的礼物 ------------------------------------------------------
const giftList = ref([])
const doGetPerformGift = async()=>{
	const res = await HFiveMemberAppObjProcess({"functionName": "getPerformGift_H5","contentData": ''})
	giftList.value = res
	console.log(res,'getPerformGift_H5：');

	if(storeShopInfo.value.orgCode == '0030') {
		   giftList.value = singerActive.value === 0 ? res.filter(item => item.name === "乐队团花") : res.filter(item => item.name !== "乐队团花");
	}
	console.log(giftList.value,'giftList.value')
	
	if(res && res[0]){ // 默认礼物赋值
		   rewardForm.value.giftPrice = giftList.value[giftValue.value].price
		   rewardForm.value.giftCode  = giftList.value[giftValue.value].code
		   rewardForm.value.giftName  = giftList.value[giftValue.value].name
	}
	
}

// ------------------------------------------------------- 点歌 ------------------------------------------------------
const orderSongForm = ref({
	batchCode:'',
	memberCode:'',
	memberCardCode:'',
	memberName:'',
	memberMobile:'',
	memberHeadImage:'',
	roomCode:'',
	roomName:'',
	artistCode:'',
	artistName:'',
	songCode:'',
	payType:'',
	payPrice:'',
	leaveMsg:'',
})
const showDialog = ref(false) // 点歌二次确认弹窗
const toolValue = ref('')
const cancleDialog = ()=>{
	showDialog.value = false
}

const doPerformChoose =(v)=>{
	if(v.currentCount >= v.maxCount){
		uni.showToast({
			title: '该歌曲今日可点次数已达上限',
			icon: 'none'
		});
		return
	}
	showDialog.value = true
	toolValue.value = v
}

// const payInfo = ref({
// 		    cardNo: userInfo.code,
// 		    fee: userInfo.payCardAmt
// 		})
// const orderSongFlag = ref(false)
const paySongInfo = ref({})
const doPaySongInfo = ref({})
const songPayShow = ref(false)
const confirmDialog = (e) =>{
	uni.showLoading({
	    title: '加载中，请稍等',
	    mask: true, // 显示遮罩层
	    maskClickable: false // 遮罩层不可点击
	});
	console.log(e);
	const v = toolValue.value
	let fee = Number(v.price)
	const payForm = {
	      orderBatchCode: '',
	      roomCode: rewardForm.value.roomCode,
	      consumeCode: '',
	      fee:fee,
	};
	paySongInfo.value = payForm // 点歌支付唤起参数
	
	const info = uni.getStorageSync('userInfo')
	const cardfo = uni.getStorageSync('cardInfo')
	doPaySongInfo.value = {  // 临时点歌参数
		batchCode:formBatchList.value[timeActive.value].batchCode,
		memberCode:info.userCode,
		memberCardCode:cardfo.code,
		memberName:info.name,
		memberMobile:info.mobile,
		memberHeadImage:info.attachment,
		roomCode:'',
		roomName:'',
		artistCode:v.artistCode,
		artistName:v.artistName,
		songCode:v.songCode,
		songName:v.songName,
		payType:'002',
		payPrice:v.price,
		leaveMsg:'',
	}
	if(fee == 0){
		
		HFiveMemberAppObjProcess({functionName: "PerformChoose_H5",contentData:doPaySongInfo.value})
		.then(paymentRes=>{
			showDialog.value  = false
			setTimeout(function() {
				uni.hideLoading()
				uni.showToast({ title: '点歌成功', icon: 'none' });
			}, 1000);
			
		})
		.catch(err=>{
			showDialog.value  = false
			setTimeout(function() {
				uni.hideLoading()
				uni.showToast({ title: '点歌失败', icon: 'none' });
			}, 1000);
			
		})
	}else{
		uni.hideLoading()
		console.log(paySongInfo.value);
		showDialog.value  = false
		songPayShow.value = true // 支付选择弹窗
	}
	

	// console.log(v);
	
	

	// if(orderSongFlag.value){
	// 	uni.showToast({
	// 		title: '加载中，请稍等',
	// 		icon: 'none'
	// 	}); 
	// 	return
	// }
	// orderSongFlag.value = true
	
	// const payForm = {
	//       orderBatchCode: '',
	//       roomCode: rewardForm.value.roomCode,
	//       consumeCode: '',
	//       fee:fee,
	// };
	// const orderRes  = await HFiveMemberAppObjProcess({"functionName": "PayPerSongform_H5","contentData": payForm})
	// const wxparams = {
	//   timeStamp: orderRes.timeStamp,
	//   nonceStr: orderRes.nonceStr,
	//   package: orderRes.package,
	//   signType: orderRes.signType,
	//   paySign: orderRes.paySign,
	//   tradeNo: orderRes.tradeNo
	// };
	// const rewardInfo = orderSongForm.value
	// wx.miniProgram.navigateTo({url: `/pages/home/songpay/index?wxparams=${encodeURIComponent(JSON.stringify(wxparams))}&rewardInfo=${encodeURIComponent(JSON.stringify(rewardInfo))}`})
	// orderSongFlag.value = false
	// popupShow.value = false

}
// 点歌支付完成
const finishPaySong = ()=>{
	songPayShow.value = false // 支付选择弹窗
	uni.showToast({ title: '支付成功', icon: 'none' });
}

// // ------------------------------------------------------- 获取场次的打赏记录 ------------------------------------------------------
const rewardList = ref([])
const getRewardForm = ref({
	batchCode:'',
	currentDate:'',
	memberCode:'',
	memberCradCode:'',
	memberName:'',
	roomName:'',
	artistCode:'',
	artistName:'',
	giftCode:'',
	giftName:'',
})
const Rewardetail = ref(false)
const doGetPerformReward = async()=>{
	// getRewardForm.value.batchCode = formBatchList.value[timeActive.value].batchCode
	const today = new Date();
	// 获取年、月、日
	const year = today.getFullYear();
	const month = today.getMonth() + 1; // 月份是从0开始的，所以要加1
	const day = today.getDate();
	// 格式化输出（例如：2024-12-07）
	const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
	getRewardForm.value.currentDate = formattedDate
	const res = await HFiveMemberAppObjProcess({"functionName": "GetPerformReward_H5","contentData": getRewardForm.value})
	rewardList.value = res
	// rewardList.value= [
	// 	{
	// 		memberHeadImage:'https://oss.jtmckj.com/supplyH5/tset-icon3.png',
	// 		giftImage:'https://oss.jtmckj.com/supplyH5/tset-icon2.png',
	// 		memberName:'张三',
	// 		giftNum:6,
	// 		artistName:'dad',
	// 		roomName:'A01'
	// 	},
	// 	{
	// 		memberHeadImage:'https://oss.jtmckj.com/supplyH5/tset-icon3.png',
	// 		giftImage:'https://oss.jtmckj.com/supplyH5/tset-icon2.png',
	// 		memberName:'张三',
	// 		giftNum:6,
	// 		artistName:'dad',
	// 		roomName:'A01'
	// 	},
	// 	{
	// 		memberHeadImage:'https://oss.jtmckj.com/supplyH5/tset-icon3.png',
	// 		giftImage:'https://oss.jtmckj.com/supplyH5/tset-icon2.png',
	// 		memberName:'张三',
	// 		giftNum:6,
	// 		artistName:'dad',
	// 		roomName:'A01'
	// 	},
	// 	{
	// 		memberHeadImage:'https://oss.jtmckj.com/supplyH5/tset-icon3.png',
	// 		giftImage:'https://oss.jtmckj.com/supplyH5/tset-icon2.png',
	// 		memberName:'张三',
	// 		giftNum:6,
	// 		artistName:'dad',
	// 		roomName:'A01'
	// 	},
	// 	{
	// 		memberHeadImage:'https://oss.jtmckj.com/supplyH5/tset-icon3.png',
	// 		giftImage:'https://oss.jtmckj.com/supplyH5/tset-icon2.png',
	// 		memberName:'张三',
	// 		giftNum:6,
	// 		artistName:'dad',
	// 		roomName:'A01'
	// 	},
	// 	{
	// 		memberHeadImage:'https://oss.jtmckj.com/supplyH5/tset-icon3.png',
	// 		giftImage:'https://oss.jtmckj.com/supplyH5/tset-icon2.png',
	// 		memberName:'张三',
	// 		giftNum:6,
	// 		artistName:'dad',
	// 		roomName:'A01'
	// 	}
	// ]
	console.log(res,'rewardList')
	console.log(res);
	// singerList.value = res
}

// // ------------------------------------------------------- 获取场次的点歌记录 ------------------------------------------------------
const orderSongList = ref([])
const getOrderList = ref({
	batchCode:'',
	currentDate:'',
	memberCode:'',
	memberCradCode:'',
	memberName:'',
	roomName:'',
	artistCode:'',
	artistName:'',
	songCode:'',
	songName:'',
})
const doGetPerformChoose = async()=>{
	// getRewardForm.value.batchCode = formBatchList.value[timeActive.value].batchCode
	const today = new Date();
	// 获取年、月、日
	const year = today.getFullYear();
	const month = today.getMonth() + 1; // 月份是从0开始的，所以要加1
	const day = today.getDate();
	// 格式化输出（例如：2024-12-07）
	const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
	getOrderList.value.currentDate = formattedDate
	const res = await HFiveMemberAppObjProcess({"functionName": "GetPerformChoose_H5","contentData": getOrderList.value})
	orderSongList.value = res
	console.log(res);
	// singerList.value = res
}


onLoad((options) => {
		// const encodedParams = new URLSearchParams(window.location.search).get('referrerInfo')
		// console.log(encodedParams,'encodedParams')
  console.log(	uni.getStorageSync('cardInfo'),'svcsdc')
		const info = uni.getStorageSync('userInfo')
		
		console.log(info,'info')

		rewardForm.value = {
			batchCode:'',
			memberCode:info.userCode,
			memberCardCode:info.code,
			memberName:info.name,
			memberMobile:info.mobile,
			memberHeadImage:info.attachment,
			roomCode:'',
			roomName:'',
			artistCode:'',
			giftCode:'',
			giftNum:1,
			giftPrice:0,
			remark:''
		}
});

let intervalId = null;
const xunhuan = ()=>{
	doGetPerformReward() // 获取打赏记录
	doGetPerformChoose() // 获取点歌记录
}
onMounted(async() => {

	window.addEventListener('message', (event) => {
	  if (event.data && event.data.action === 'payResult') {
	    console.log('支付结果:', event.data.result)
	  }
	})

	await doGetPerformBatch() // 获取门店场次安排
	doGetPerformArtistAttribute() // 获取艺人的类型和性别
	doGetPerformGift() // 获取门店打赏的礼物
	getRoomTable() // 获取房台
	doGetPerformReward() // 获取打赏记录
	doGetPerformChoose() // 获取点歌记录
	if(formBatchList.value && formBatchList.value[0]){
		artistForm.value.batchCode = formBatchList.value[0].batchCode // 默认第一个场次
		doGetPerformArtist() // 获取门店场次的艺人
	}else{
		uni.showToast({
			title: '门店暂无场次安排',
			icon: 'none'
		});
	}
	intervalId = setInterval(xunhuan, 10000); 
})

onUnmounted(()=>{
	if (intervalId) {
	    clearInterval(intervalId); // 页面卸载时清除定时器
	    intervalId = null;
	}
})



</script>

<style scoped lang="scss">
.bac-f2{
	background-image:url("https://oss.jtmckj.com/wmp/kbq/reward/i_reward_back1.png") !important;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% 630rpx;
}
::v-deep{
	.u-tabs__wrapper__nav__line{
		background-color: var(--maincolorbd8) !important;
	}
	.uni-select{
		border: none;
	}
	.up-navbar-view{
		display: none;
	}
}
.reward-contain {
    height: 100%;
	padding-top: 20rpx;
	padding-bottom: 120rpx;
    .reward-contain-header {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        .header-left {
            width: 75rpx;
            height: 76rpx;
            margin: 0 24rpx;
        }
        .header-right {
            display: flex;
            align-items: center;
            overflow: hidden;
            .scroll-view {
                display: flex;
                align-items: center;
                justify-content: space-between;
                white-space: nowrap;
            }
            .header-right-item {
                display: inline-block;
                padding-top: 12rpx;
                width: 180rpx;
                height: 80rpx;
                background: var(--mainbaccolor9);
                border-radius: 8px;
                text-align: center;
                margin-right: 20rpx;
                .item-top {
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: var(--maincolorf2);
                    line-height: 28rpx;
                    margin-bottom: 10rpx;
                }
                .item-bottom {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: var(--maincolorf4);
                    line-height: 24rpx;
                }
                &.active {
                    background: var(--mainbaccolor13);
					
                    .item-top {
                       color: var(--maincolorf1);
                    }
                    .item-bottom {
                        color: var(--maincolorf2);
                    }
                }
            }
        }
    }
    .reward-contain-nav {
        display: flex;
        align-items: center;
        padding: 0 24rpx;
        justify-content: space-between;
        margin-bottom: 24rpx;
        .nav-left {
            height: 60rpx;
            background: var(--mainbaccolor9);
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            .nav-left-item {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #999999;
                line-height: 28rpx;
                text-align: center;
                padding: 0 20rpx 0 27rpx;
                border-left: 2rpx solid var(--dividercolor1);
                &.spe {
                    border: none;
					color: var(--maincolorf1);
                }
            }
        }
        .nav-right {
            height: 60rpx;
            background: var(--mainbaccolor9);
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            max-width: 440rpx;
            .scroll-view {
                display: flex;
                align-items: center;
                white-space: nowrap;
                .nav-right-item {
                    display: inline-block;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #999999;
                    line-height: 28rpx;
                    text-align: center;
                    padding: 0 20rpx 0 27rpx;
                    border-left: 2rpx solid var(--dividercolor1);
                    &.spe {
                        border: none;
						color: var(--maincolorf1);
                    }
                }
            }
        }
    }
    .reward-contain-banner {
        display: flex;
        align-items: center;
        padding: 0 24rpx;
        margin-bottom: 23rpx;
        .scroll-view {
            display: flex;
            align-items: center;
            white-space: nowrap;
            .banner-item {
                display: inline-block;
                margin-right: 10rpx;
                position: relative;
                .banner-item-img {
                    width: 168rpx;
                    height: 240rpx;
					border-radius: 10rpx;
                }
                .banner-item-title {
                    position: absolute;
                    left: 50%; /* 水平居中 */
                    transform: translate(-50%, 0); /* 移动元素的中心点到中心位置 */
                    bottom: 10rpx;
                    width: 152rpx;
                    height: 40rpx;
                    background: var(--mainbaccolor14);
                    border-radius: 20rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #ffffff;
                    line-height: 40rpx;
                    text-align: center;
					&.spe{
						color: var(--maincolorf11);
					}
                }
                .banner-item-active {
                    position: absolute;
                    width: 168rpx;
                    height: 253rpx;
                    left: 0;
                    top: 0;
                }
            }
        }
    }
    .reward-contain-order {
        margin: 0 auto 40rpx;
        width: 702rpx;
        height: 750rpx;
		border-radius: 16rpx;
        background-image: url('https://oss.jtmckj.com/supplyH5/i_song_back.png');
		background-repeat: no-repeat; 
		background-size: cover; 
		background-position: center; 
		position: relative;
		
        .order-top {
            display: flex;
			justify-content: space-between;
            align-items: center;
            padding: 24rpx 0 24rpx 24rpx;
            .order-top-title {
                margin-right: 12rpx;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 32rpx;
                color: var(--maincolorf1);
                line-height: 32rpx;
            }

        }
		.order-main-nav{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			.songList-li-left{
				text-align: center;
				&.one{
					width: 20%;
				}
				&.two{
					width: 10%;
				}
				&.three{
					width: 20%;
				}
				&.four{
					width: 30%;
				}
				&.five{
					width: 20%;
				}
			}
		}
        .order-main {
            height: 596rpx;
            overflow-y: auto;
			.songList-main-li{
				display: flex;
				align-items: center;
				justify-content: space-between;
				// padding: 0 20rpx;
				padding-bottom: 6rpx;
			}
			.order-main-orderList{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				.li-right{
					font-size: 24rpx;
					text-align: center;
					padding-bottom: 20rpx;
					&.one{
						width: 20%;
					}
					&.two{
						width: 10%;
					}
					&.three{
						width: 20%;
					}
					&.four{
						width: 30%;
					}
					&.five{
						width: 20%;
					}
				}
			}
            .order-main-li {
                margin-bottom: 34rpx;
                display: flex;
                align-items: center;
                padding-left: 28rpx;
                .li-left {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: var(--maincolorf1);
                    line-height: 26rpx;
                    width: 360rpx;
                    margin-right: 24rpx;
					background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_icon_song.png');
					background-repeat: no-repeat;
					background-size: 20rpx 24rpx;
					background-position: left center;
					padding-left: 31rpx;
                }
                .li-right {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: var(--maincolorf2);
                    line-height: 26rpx;
                }
            }
        }
    }
	.jtreward-contain-box {
		width: 100%;
		position: fixed;
		bottom: env(safe-area-inset-bottom, 20rpx); 
	}
    .reward-contain-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
		height: 120rpx;
		background-image: url('https://oss.jtmckj.com/supplyH5/i_bot_back.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
        // margin-bottom: 40rpx;
		padding: 0 72rpx;
        .tab-left {
            width: 280rpx;
            height: 80rpx;
            background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_icon_order1.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            margin-right: 22rpx;
        }
        .tab-right {
            width: 280rpx;
            height: 80rpx;
            background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_icon_reward1.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
    }
   
}
::v-deep{
	.popup-content{
		padding: 12px;
	}
}
.popup-container {
    max-height: 800rpx;
    padding-bottom: 100rpx;
    position: relative;
	.popup-container-title{
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: var(--maincolorf1);
		line-height: 36rpx;
		text-align: center;
		padding: 20rpx 0 40rpx;
	}
    .popup-container-tab {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -180rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40rpx;
        .tab-left {
            width: 280rpx;
            height: 100rpx;
            background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_icon_order.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            margin-right: 22rpx;
			&.active{
				background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_icon_order-whi.png');
			}
        }
        .tab-right {
            width: 280rpx;
            height: 100rpx;
            background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_icon_reward.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
			&.active{
				background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_icon_reward-whi.png');
			}
        }
    }
    .popup-container-order {
        .popup-container-search {
            padding: 0rpx 24rpx 10rpx;
            .van-search__content {
                background-color: var(--mainbaccolor10);
                border: 2rpx solid var(--maincolorbd);
                /* height: 60rpx;*/
            }
            .van-cell {
                padding: 10rpx 0 !important;
            }
        }
        .popup-container-secTab {
            width: 300rpx;
            .van-tab--active {
                color: #ffaa00 !important;
            }
            .van-tabs__line {
                background: #ffaa00;
            }
        }
        .popup-container-main {
            // padding: 0 24rpx;
            max-height: 700rpx;
            overflow-y: auto;
            .main-item {
                // background: #212121;
				background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_item_back1.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
                border-radius: 20rpx;
                margin-bottom: 20rpx;
                padding: 20rpx 24rpx;
                .item-top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20rpx;
                    .item-top-left {
                        display: flex;
                        align-items: center;
                        .top-left-title {
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 32rpx;
                            color: var(--maincolorf1);
                            line-height: 32rpx;
                        }
                        .top-left-value {
                            font-family: PingFang SC;
                            font-weight: 500;
                            font-size: 26rpx;
                            color: var(--maincolorf2);
                            line-height: 26rpx;
							.value-name{
								color: var(--maincolorf11);
							}
                        }
                    }
					.top-price{
						font-size: 32rpx;
						color: var(--maincolor1);
						font-weight: bold;
					}
                    .item-top-right {
                        width: 120rpx;
                        height: 60rpx;
                        background: var(--mainbaccolor12);
                        border-radius: 30rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 28rpx;
                        color: var(--maincolor1);
                        line-height: 60rpx;
                        text-align: center;
                    }
                }
                .item-bottom {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .item-bottom-left {
                        display: flex;
                        align-items: center;
                        .left-first {
                            font-family: PingFang SC;
                            font-weight: 500;
                            font-size: 26rpx;
                            color: var(--maincolorf2);
                            line-height: 26rpx;
                            margin-right: 40rpx;
							.left-first-name{
								color: var(--maincolorf1);
							}
                        }
                        .left-second {
                            font-family: PingFang SC;
                            font-weight: 500;
                            font-size: 26rpx;
                             color: var(--maincolorf2);
                            line-height: 26rpx;
							.left-first-name{
								color: var(--maincolorf1);
							}
                        }
                    }
                    .item-bottom-right {
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 26rpx;
                         color: var(--maincolorf2);
                        line-height: 26rpx;
						.order-num{
							color: var(--maincolorf1);
						}
                    }
                }
            }
        }
    }
    .popup-container-gift {
        .gift-top {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 40rpx 10rpx 60rpx;
			max-height: 400rpx;
			overflow: auto;
            .gift-top-item {
                flex: 0 0 25%; /* 每个元素占据容器的 25% */
                margin-bottom: 32rpx;
                width: 120rpx;
                text-align: center;
                /* margin-right: 52rpx;*/
                .item-img {
                    width: 120rpx;
                    height: 120rpx;
                    margin-bottom: 10rpx;
                    &.active {
                        border: 2rpx solid var(--maincolorbd9);
                    }
                }
                .item-title {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #cccccc;
                    line-height: 28rpx;
                    margin-bottom: 10rpx;
                    /* text-align: center;*/
                }
                .item-value {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #666666;
                    line-height: 24rpx;
                    text-align: center;
                }
            }
        }
        .gift-center {
            padding: 0 24rpx 194rpx;
            .gift-center-title {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 32rpx;
                color: var(--maincolorf1);
                line-height: 32rpx;
                margin-bottom: 24rpx;
            }
            .gift-center-main {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .main-value {
                    // width: 500rpx;
                    height: 60rpx;
                    background: var(--mainbaccolor10);
                    border-radius: 8rpx;
                    // padding-left: 25rpx;
					padding: 0 0 0 25rpx !important; 
					border: 1px solid var(--maincolorbd);
					margin-right: 20rpx;
                }
                .main-button {
                    width: 160rpx;
                    height: 60rpx;
                    background: var(--mainbaccolor12);
                    border-radius: 8rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: var(--maincolor1);
                    line-height: 60rpx;
                    text-align: center;
                }
            }
        }
        .gift-bottom {
            position: fixed;
            box-sizing: border-box;
            // background: #000000;
            width: 100%;
            height: 100rpx;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10rpx 24rpx;
            .gift-bottom-left {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                color: var(--maincolorf1);
                line-height: 32rpx;
            }
            .gift-bottom-right {
                display: flex;
                align-items: center;
                width: 360rpx;
                height: 80rpx;

                background: var(--mainbaccolor11);
                border-radius: 40rpx;
                border: 1px solid var(--maincolorbd10);
                .right-num {
                    width: 50%;
                    height: 80rpx;
                    background: var(--mainbaccolor10);
                    border-radius: 40rpx 0 0 40rpx;
                    // border: 2px solid #ffaa00;
                    box-sizing: border-box;
                    /* text-align: center;*/
                    padding-left: 45rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 32rpx;
                    color: var(--maincolor1);
                    line-height: 80rpx;
                    background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_tra_top.png');
                    background-repeat: no-repeat;
                    background-size: 18rpx 12rpx;
                    background-position: calc(100% - 40rpx) center;
                }
                .right-title {
                    width: 50%;
                    text-align: center;
                    /* border: 2px solid #FFAA00;*/
                    border-radius: 0rpx 40rpx 40rpx 0rpx;
                    height: 80rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 32rpx;
                    color: var(--maincolorf1);
                    line-height: 80rpx;
                }
            }
        }
    }
}
.x-popup {
    background-color: #0d0d0c !important;
}

.van-popup {
    background-color: #0d0d0c !important;
    overflow-y: visible !important;
}
.table-container {
    padding-bottom: 40rpx;
    
    .popup-container-header {
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    	// padding: 33rpx 60rpx 32rpx;
    	border-bottom: 1rpx solid var(--maincolorbd);
    
    	.header-left {
    		font-family: PingFang SC;
    		font-weight: 500;
    		font-size: 32rpx;
    		color: #666666;
    		line-height: 32rpx;
    		padding: 33rpx 60rpx 32rpx;
    	}
    
    	.header-center {
    		font-family: PingFang SC;
    		font-weight: bold;
    		font-size: 36rpx;
    		color: var(--maincolorf1);
    		line-height: 36rpx;
    	}
    
    	.header-right {
    		font-family: PingFang SC;
    		font-weight: 500;
    		font-size: 32rpx;
    		color: #00AAFF;
    		line-height: 32rpx;
    		padding: 33rpx 60rpx 32rpx;
    	}
    }
    
    .popup-container-main {
    	margin-top: 20rpx;
    	display: flex;
    	align-items: center;
    	justify-content: flex-start;
    	flex-wrap: wrap;
    
    	.main-item {
    		border-radius: 8rpx;
    		font-family: PingFang SC;
    		font-weight: 500;
    		font-size: 32rpx;
    		color: var(--maincolorf1);
    		line-height: 80rpx;
    		text-align: center;
    
    		.main-item-one {
    			background: var(--mainbaccolor5);
    			border-radius: 8rpx;
    			margin-right: 10rpx;
				&.selected{
					background: var(--mainbaccolor7);
					color: var(--maincolor);
				}
    		}
    	}
    
    	.van-col {
    		margin-bottom: 20rpx;
    	}
    
    }
    
    .popup-container-footer {
    	background: var(--mainbaccolor);
    	border-radius: 16rpx;
    	padding: 10rpx 0rpx 4rpx 10rpx;
    	display: flex;
    	align-items: center;
    	justify-content: flex-start;
    	flex-wrap: wrap;
    
    	.footer-item {
    		width: 118rpx;
    		height: 60rpx;
    		background: var(--mainbaccolor5);
    		border-radius: 8rpx;
    		text-align: center;
    		margin-bottom: 20rpx;
    		font-family: PingFang SC;
    		font-weight: 500;
    		font-size: 28rpx;
    		color: var(--maincolorf1);
    		line-height: 60rpx;
    		margin-right: 16rpx;
    		white-space: nowrap;
			&.selected{
				background: var(--mainbaccolor7);
				color: var(--maincolor);
			}
    	}
    }
}
.pop-contain{
	min-width: 500rpx;
	.pop-title{
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: var(--maincolorf1);
		line-height: 36rpx;
		text-align: center;
	}
	.pop-center{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: var(--maincolorf1);
		line-height: 32rpx;
		text-align: center;
		padding: 40rpx 0 ;
	}
	.pop-footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn-cancle{
			width: 240rpx;
			height: 80rpx;
			border-radius: 40rpx;
			border: 2px solid var(--maincolorbd8);
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: var(--maincolorf2);
			line-height: 80rpx;
			text-align: center;
		}
		.btn-confirm{
			width: 240rpx;
			height: 80rpx;
			background: var(--mainbaccolor4);
			border-radius: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: var(--maincolor);
			line-height: 80rpx;
			text-align: center;
		}
	}
}


.jt-flex-action {
	display: flex;
	align-items: center;
	position: relative;
	padding-right: 15rpx;
				.ds-detai {
					font-weight: 500;
					font-size: 24rpx;
					color: #00AAFF;
					padding-right: 20rpx;
				}
				.border-bd{
					position: absolute;
					left: 42%;
					top: 10rpx;
				    width: 1rpx;
					height: 20rpx;
					 background: #00AAFF;
				}
			  .order-change{
				margin-left: 10rpx;
			  	// width: 100rpx;
			  	// height: 40rpx;
			  	// background: var(--mainbaccolor12);
			  	border-radius: 30rpx;
			  	font-family: PingFang SC;
			  	font-weight: 500;
			  	font-size: 24rpx;
			  	color: var(--maincolorf11);
			  	line-height: 40rpx;
			  	text-align: center;
			  	padding-right: 20rpx;
			  	background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_tra_right-blue.png');
			  	background-repeat: no-repeat;
			  	background-size: 11rpx 18rpx;
			  	background-position: calc(100% - 16rpx) center;
			  	
			  	&.spe{
			  		width: 120rpx;
			  	}
			  }
			  
		}
		
		.order-top-value {
			padding-right: 26rpx;
			text-align: right;
			margin-bottom: 24rpx;
		    font-family: PingFang SC;
		    font-weight: 500;
		    font-size: 24rpx;
		    color: var(--maincolorf4);
		    line-height: 24rpx;
			.song-num{
				color: var(--maincolorf10);
			}
		}
		
		.reward-contain-continar {
			height: 800rpx;
			  .reward-contain-tips {
			         height: 100%;
			         overflow-y: auto;
			         .tips-item {
			             // background: var(--mainbaccolor10);
						 background-image: url('https://oss.jtmckj.com/supplyH5/tset-icon1.png');
						 background-repeat: no-repeat;
						 background-size: cover;
			             border-radius: 20rpx;
			             margin-bottom: 20rpx;
			             .tips-item-top {
			                 display: flex;
			                 align-items: center;
			                 justify-content: space-between;
			                 padding: 16rpx 54rpx 12rpx 24rpx;
			                 .top-left {
			                     display: flex;
			                     align-items: center;
			                     .top-left-img {
			                         width: 80rpx;
			                         height: 80rpx;
			                         margin-right: 16rpx;
			                     }
			                     .top-left-user {
			                         .user-title {
			                             font-family: PingFang SC;
			                             font-weight: bold;
			                             font-size: 28rpx;
			                             color: var(--maincolorf1);
			                             line-height: 28rpx;
			                             margin-bottom: 17rpx;
			                             white-space: nowrap;
			                         }
			                         .user-value {
			                             font-family: PingFang SC;
			                             font-weight: 500;
			                             font-size: 26rpx;
			                             color: var(--maincolorf4);
			                             line-height: 26rpx;
			                         }
			                     }
			                 }
			                 .top-right {
			                     .top-right-img {
			                         width: 100rpx;
			                         height: 100rpx;
			                     }
			                 }
			             }
			             .tips-item-bottom {
			                 display: flex;
			                 align-items: center;
			                 justify-content: space-between;
			                 padding: 0 24rpx 24rpx;
			                 .bottom-tips {
			                     background: #BFEAFF;
			                     border-radius: 8rpx;
			                     display: flex;
			                     align-items: center;
			                     padding: 11rpx 12rpx 11rpx 16rpx;
			                     .tips-left {
			                         font-family: PingFang SC;
			                         font-weight: 500;
			                         font-size: 26rpx;
			                         color: var(--maincolorf1);
			                         line-height: 26rpx;
			                         margin-right: 35rpx;
			 						.tips-name{
			 							color: var(--maincolorf11);
			 						}
			 						.tips-gift{
			 							color: var(--maincolorf12);
			 						}
			 
			                     }
			                     .tips-right {
			                         display: flex;
			                         align-items: center;
			                         .tips-right-num {
			                             width: 28rpx;
			                             height: 28rpx;
			                             margin-right: 14rpx;
			                         }
			                         .tips-right-val {
			                             font-family: PingFang SC;
			                             font-weight: bold;
			                             color: var(--maincolorf12);
			                             font-size: 28rpx;
			                             line-height: 28rpx;
			                         }
			                     }
			                 }
			                 .bottom-pay {
			                     // width: 160rpx;
			                     // height: 48rpx;
			                     background: var(--mainbaccolor12);
			 					color: var(--maincolorf1);
			                     padding: 11rpx 35rpx 11rpx 16rpx;
			                     border-radius: 8rpx;
			                     background-image: url('https://oss.jtmckj.com/wmp/kbq/reward/i_tra_right-bla.png');
			                     background-repeat: no-repeat;
			                     background-size: 12rpx 18rpx;
			                     background-position: calc(100% - 16rpx) center;
			                 }
			             }
			         }
			 		.tips-none{
			 			display: flex;
			 			align-items: center;
			 			justify-content: center;
			 			flex-direction: column;
			 			.tips-none-img{
			 				width: 360rpx;
			 				height: 360rpx;
			 			}
			 			.tips-none-title{
			 				font-family: PingFang SC;
			 				font-weight: 500;
			 				font-size: 32rpx;
			 				color: #999999;
			 				line-height: 32rpx;
			 				padding-top: 24rpx;
			 			}
			 		}
			     }
		}
		.jt-zwcj-img{
			padding: 0 24rpx;
			width: 94%;
			height: 226rpx;
			margin-bottom: 36rpx;
		}
		.tips-none{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.tips-none-img{
				width: 360rpx;
				height: 360rpx;
			}
			.tips-none-title{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #999999;
				line-height: 32rpx;
				padding-top: 24rpx;
			}
		}
		
		::v-deep .uniui-clear{
			display: none !important;
		}
		.as-display-none {
			display: none;
		}
		.as-center{
			justify-content: center !important;
		}
</style>
